<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div :class="'outer-' + module.width.size">
        <!-- <div v-if="!module.header.hidden" class="title"> <div class="leftHat"></div>  {{ module.header.title.text }}</div> -->
        <ul v-if="btns.length > 0" :class="'navs list style-' + styleName">
            <li v-for="(btn, index) in btns" :key="index" v-if="(index < module.data.btnrow * styleName)">
                <!-- {{btn.name}} -->
                <item :nav="btn"></item>
            </li>
            <div v-if="btns.length > module.data.btnrow * styleName" class="slide">
                <div class="slide-bar" :style="{backgroundColor: bgcolor}"></div>
            </div>
        </ul>
        <empty v-else>请先在右侧面板中添加导航按钮</empty>

    </div>
</template>

<script>
import Empty from "../Base/Empty.vue"
import item from "./item.vue";
export default {
    components: {
        Empty,
        item
    },
    data () {
        return {
            loading: false,
        };
    },
    props: {
        module: { type: Object },
    },

    computed: {
        btns: function () {
            var moduleData = this.module || {};

            return moduleData.items.filter(item => item.public)
        },
        styleName: function () {
            return !this.module.data.styleName ? 4 : this.module.data.styleName;
        },
        bgcolor: function(){
            return this.$store.state.myconfig.color.primary || '#1989fa'
        }
    },

    watch: {},

    mounted: function () { },

    methods: {},
};
</script>

<style scoped>
.outer-small{
    width: 690px;
    margin: 0 auto;
}
.outer-large{
    width: 710px;
    margin: 0 auto;
}
.outer-full{
    width: 750px;
}
ul.navs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    padding: 16px;
    width: 100%;
    list-style: none;
}

ul.navs li {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.slide{
    width: 100px;margin: 10px auto;background: #eeeeee;height: 10px;border-radius: 10px;margin-top: 30px;
}
.slide-bar{
    width: 50px;background: blue;height: 10px;border-radius: 10px;
}

ul.style-4 li {
    margin-right: calc((100% - 400px) / 3);
}

ul.style-4 li:nth-child(4n) {
    margin-right: 0px;
}

ul.style-4 li:nth-child(-n + 4) {
    margin-top: 0px;
}

ul.style-5 li {
    margin-right: calc((100% - 500px) / 4);
}

ul.style-5 li:nth-child(5n) {
    margin-right: 0px;
}

ul.style-5 li:nth-child(-n + 5) {
    margin-top: 0px;
}



ul.navs li.style-4 {
    width: 25%;
}

ul.navs li.style-5 {
    width: 20%;
}
.title{
    font-size: 42px;
    font-weight: bold;
    padding: 20px 30px 10px 30px;
}
.leftHat{
    width: 8px;
    height: 30px;
    display: inline-block;
    background: red;
}
</style>
